window.addEventListener('load',function(){
	//1.获取元素
	var arrow_l = document.querySelector('.arrow_l');
	var arrow_r = document.querySelector('.arrow_r');
	var foucs = document.querySelector('.foucs');
	var foucsWidth = foucs.offsetWidth;
	//2.鼠标经过显示左右按钮
	foucs.addEventListener('mouseenter',function(){
		arrow_l.style.display='block';
		arrow_r.style.display='block';
		clearInterval(timer);
		timer = null; //清除定时器变量
	})
	foucs.addEventListener('mouseleave',function(){
		arrow_l.style.display='none';
		arrow_r.style.display='none';
		timer = setInterval(function() {
		//手动调用点击事件
			arrow_r.click();
	    },2000);
	})
	//3.动态生成小圆圈 有几张图，生成几个小圆圈
	var ul = foucs.querySelector('ul');
	var ol = foucs.querySelector('.circle');
	for(var i=0; i<ul.children.length; i++) {
		//创建li
		var li = document.createElement('li');
		//记录当前小圆圈的索引号 自定义属性
		li.setAttribute('index',i);
		//把li插入到ol里
		ol.appendChild(li);
		//小圆圈排他思想 直接在生成小圆圈的同时绑定点击事件
		li.addEventListener('click',function(){
			//干掉所有人 把所有li清除current类名
			for(var i=0; i<ol.children.length; i++) {
				ol.children[i].className = '';
			}
			//留下我自己 当前li设置current类名
			this.className = 'current';
			//点击小圆圈，移动图片
			//ul的移动距离是小圆圈索引号乘以图片宽度，注意是负值
			//当点击某个小li拿到当前li的索引号
			var index = this.getAttribute('index');
			//当我们点击了li就要把li的索引号给num
			num = index;
			//当我们点击了li就要把li的索引号给circle
			circle = index;
			console.log(foucsWidth);
			animate(ul,-index*foucsWidth);
		})
	}
	//把ol里面第一个li设置类名current
	ol.children[0].className='current';
	//克隆第一张图片放在ul最后面
	var first = ul.children[0].cloneNode(true);
	ul.appendChild(first);
	//点击右侧按钮图片滚动一张
	var num = 0;
	//cricle控制小圆圈的播放
	var circle = 0;
	//节流阀
	var flag = true;
	arrow_r.addEventListener('click',function() {
		if (flag) {
			flag = false; //关闭节流阀
			//如果走到最后复制的一张图，此时ul要快速复原,left改为0
			if(num == ul.children.length - 1) {
				ul.style.left = 0;
				num = 0;
			}
			num++;
			animate(ul,-num*foucsWidth, function() {
				flag = true;  //打开节流阀
			});
			circle++;
			// if(circle==4) {
			// 	circle = 0;
			// }
			for(var i=0; i<ol.children.length; i++) {
				ol.children[i].className='';
			}
			ol.children[circle%(ol.children.length)].className='current';
		}
	});

	arrow_l.addEventListener('click',function() {
		if (flag) {
			flag = false;
			//如果走到最后复制的一张图，此时ul要快速复原,left改为0
			if(num == 0) {
				num = ul.children.length - 1;
				ul.style.left = -num * foucsWidth + 'px';			
			}
			num--;
			animate(ul,-num*foucsWidth, function() {
				flag = true;
			});
			circle--;
			//如果circle<0说明第一张图要改成第四各小圆圈
			if (circle<0) {
				circle = ol.children.length - 1;
			}
			// if(circle==4) {
			// 	circle = 0;
			// }
			for(var i=0; i<ol.children.length; i++) {
				ol.children[i].className='';
			}
			ol.children[circle].className='current';
			}
	});
	//自动播放
	var timer = setInterval(function() {
		//手动调用点击事件
		arrow_r.click();
	},3000);
})